<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  <title>首页</title>
  <script src='./js/vue.min.js'></script>
  <script src='./js/axios.min.js'></script>
  <script src="https://cdn.bootcss.com/babel-polyfill/7.0.0-rc.4/polyfill.min.js"></script>
  <link rel="stylesheet" href="./css/swiper.min.css">
  <link rel="stylesheet" href="./css/banner.css">

  <script src="./js/swiper.min.js"></script>
  <script src="./js/getData.js"></script>
  <script src='./js/banner.js'></script>
  <script src="./js/jquery.min.js"></script>
  <script src="./js/sidebar.js"></script>
</head>

<body>
  <div id="index">
    <div class="header">
      <img class="b_img" src="./images/logo.png" />
      <div class="b_n b_n_active"><a href="index.html">首页</a></div>
      <div class="b_n"><a href="news.html">新闻中心</a></div>
      <div class="b_n "><a href="work.html">工作站</a></div>
      <div class="b_n"><a href="download.html">下载与支持</a></div>
      <div class="b_n"><a href="contact.html">联系我们</a></div>
      <div class="b_n"><a href="http://www.china-gohome.net:8080/kidsweb/homing-pc/Business.html" target='_blank'>商户入口</a></div>
      <div class="b_n">
        <a href="http://www.china-gohome.net:8080/kidsweb/homing-pc/Iris.html" target='_blank'>虹膜入口</a>
      </div>
    </div>
    <div class='banner' id='banner' style='width:100%'>
      <div class='banner-view'></div>
      <div class='banner-btn'></div>
      <div class='banner-number'></div>
      <div class='banner-progres'></div>
    </div>
    <div class="content">
      <div class="c1">
        <div class="title">
          <p>公益基金</p>
          <p>PUBLIC&nbsp;WELFARE</p>
        </div>
        <p class="con" v-html='publicFund.content'>

          <!-- 人口安全保障网公益基金（以下简称基金）是由人口安全保障网于XX年XX月发起，经相关部门审核同意成立的。基金的原始基金为XX元，由XX捐赠。该基金主要用于保障弱势群体（如弱智儿童、孤寡老人等）的安全问题，与此同时，基金还资助贫困地区教育、医疗、救灾等项目。以此来保障人口安全，促进教育医疗共享，共同铸就美好的和谐社会。 -->
        </p>


        <div class="newsBox" style='display: flex'>
          <div style='width:33.3333%;padding-right:10px;padding-left:10px;' v-for='news in publicList'>
            <a :href="getUrl(news)">
              <img :src="news.homepage" style='width:100%' alt=""></a>
            <a :href="getUrl(news)">
              <div style='width:100%;display:flex;padding-top:15px;padding-bottom:20px;'>
                <div style='width:25%;padding:20px;border:1px solid #f57932;border-radius: 5px;color:#f57932;text-align:center'>
                  <span style='font-size:20px;'>{{news.yearStr}}</span><br />
                  <span style='font-size:14px'>{{news.dayStr}}</span>
                </div>
                <div style='width:75%;padding:5px;padding-left:10px;line-height:1.3;color:#333;font-size:14px'>
                  <span style='font-weight:600;'>{{news.title}}</span><br />
                  <div style='margin-top:10px;'>{{news.summary}}</div>
                </div>
              </div>

            </a>
          </div>

          <!-- <div class="nb_t">
                                <label class="nb_tab bn_t_active">我们的行动</label>
                                <label class="nb_tab">我们的使命</label>
                                <label class="nb_tab">我们的宗旨</label>
                            </div>
                            <div class="nb_c">
                                    <div class="nb_b" v-html='ourMove'>

                                        </div>
                                <div class="nb_b" style="display:none;" v-html='ourDuty'>

                                </div>
                                <div class="nb_b" style="display:none;" v-html='ourPrinciple'>
                                                <a class="nb_b_l" href="publicInfo.html?id=3"><img class="nb_b_l" :src="ourPrinciple.homepage"></a>
                                                <div class="nb_b_r">
                                                    <a class="" href="publicInfo.html?id=3">
                                                        <p class="nb_b_t">{{ourPrinciple.title}}</p>
                                                        <p class="nb_b_p">{{ourPrinciple.summary}}</p>

                                                    </a>
                                                </div>
                                </div>
                            </div> -->
        </div>
      </div>
      <div class="c2">
        <div class="title">
          <p>公司简介</p>
          <p>COMPANY&nbsp;PROFILE</p>
        </div>
        <!--<div class="company" v-html='profile.content'>

                </div>-->
        <div class="company">
          <p class="c2_p1">人口安全保障网</p>
          <p class="c2_p2">人口安全保障网平台成立于2017年，是一家拥有专业术水平的国家高新技术企业。公司地处首都北京海淀区，业务辐射全国。
            为了贯彻落实《未成年保护法》，以及十九大政协会议关于将“人工智能”运用到儿童、老人的安全保障上的精神要求公司与中国关心下一代工作委员会联合开发了“互联网+儿童安全保障”平台。依托“虹膜生物识别”技术与“Fcae...</p>
          <div class="c2_c">
            <div class="c2_c_c c2Animation"><a href="platform.html"><img src="./images/c2_c_c1.png" style="display: inline-block; width: 126px; height: 161px;"></a>
            </div>
            <div class="c2_c_c c2Animation"><a href="qualification.html"><img src="./images/c2_c_c2.png" style="display: inline-block; width: 126px; height: 161px;"></a></div>
            <div class="c2_c_c c2Animation"><a href="agent.html"><img src="./images/c2_c_c3.png" style="display: inline-block; width: 126px; height: 161px;"></a></div>
            <div class="c2_c_c c2Animation"><a href="platform.html"><img src="./images/c2_c_c4.png"></a></div>
          </div>
        </div>
      </div>
      <div class="c2">
        <div class="title">
          <p>新闻资讯</p>
          <p>NEWS AND INFORMATION</p>
        </div>
        <div class="news_infomation">
          <div class="nf_video">
            <video style="width:100%;height:100%;" controls="controls" v-if='video.url'>
              <source :src="video.url">
            </video>
          </div>
          <div class="nf_list">
            <a class="" :href="getUrl(item)" v-for='item in newsList' :key='item.id'>
              <div class="nf_list_item mbV">
                <div><img :src="item.homepage" style='width:123px' /></div>
                <div>
                  <p>{{item.title}}</p>
                  <p>{{item.summary}}</p>
                </div>
              </div>
            </a>
            <!-- <a class="" href="newsInfo.html">
                        <div class="nf_list_item mbV">
                            <div><img src="./images/newsInfomation.png" /></div>
                            <div>
                                <p>中科虹霸2018产品发布会在京举行</p>
                                <p>6月24日，中科虹霸2018产品发布会在北京国际会议中心盛大举行，本次会议以“创新赋能 刷眼未来”为主题，介绍中科虹霸自主创新的虹膜识别技术，发布面向公安......</p>
                            </div>
                        </div>
                    </a>
                    <a class="" href="newsInfo.html">
                        <div class="nf_list_item">
                            <div><img src="./images/newsInfomation.png" /></div>
                            <div>
                                <p>中科虹霸2018产品发布会在京举行</p>
                                <p>6月24日，中科虹霸2018产品发布会在北京国际会议中心盛大举行，本次会议以“创新赋能 刷眼未来”为主题，介绍中科虹霸自主创新的虹膜识别技术，发布面向公安......</p>
                            </div>
                        </div>
                    </a> -->
          </div>
        </div>
      </div>
      <div class="c2">
        <div class="title">
          <p>平台技术</p>
          <p>PLATFORM TECHNOLOGY</p>
        </div>
        <div class="platform" v-html='platform.content'>

        </div>
      </div>
      <div class="c2">
        <div class="title">
          <p>合作伙伴</p>
          <p>PARTNERS</p>
        </div>
        <div class="partners">
          <a :href="item.url" v-for='(item,index) in partnerList' v-if='index<4' :key='item.id'>
            <div class="partners_box">
              <img :src="item.logo" />
            </div>
          </a>

        </div>
        <div class="partners">
          <a :href="item.url" v-for='(item,index) in partnerList' v-if='index>=4&&index<8' :key='item.id'>
            <div class="partners_box">
              <img :src="item.logo" />
            </div>
          </a>

        </div>
        <div class="partners mt100">
          <a :href="item.url" v-for='(item,index) in partnerList' v-if='index>=8' :key='item.id'>
            <div class="partners_box">
              <img :src="item.logo" />
            </div>
          </a>

        </div>
      </div>
      <div id="footer" v-html='footer.content'></div>

    </div>
</body>
<!--<link href="stylesheet" href="./css/publicCss.css" />-->
<style type="text/css">
  @import url(./css/publicCss.css);

  .con {
    font-size: 14px;
    color: #555555;
    line-height: 28px;
    text-align: center;
    margin: 0;
    padding-top: 73px;
  }

  .con:hover {
    color: #f57932;
  }



  .c1 {
    width: 1200px;
    margin: 0 auto;
  }

  .newsBox {
    padding-top: 54px;
  }

  .nb_t {
    display: flex;
    width: 354px;
    margin: 0 auto;
    height: 35px;
    line-height: 35px;
    font-size: 14px;
    color: #555555;
  }

  .nb_t label {
    flex: 1;
    border: solid 1px #dedede;
    height: 34px;
    background: #fff;
    text-align: center;
    cursor: pointer;
  }

  .bn_t_active {
    height: 35px !important;
    color: #f07329;
    border-bottom: #fff !important;
  }

  .nb_b {
    padding-top: 31px;
    display: flex;
    border-top: solid 1px #c7c7c7;
  }

  .nb_b img {
    display: flex;
    width: 491px;
  }

  .nb_b_l {
    flex-basis: auto;
    width: 490px;
  }

  .nb_b_r {
    padding-left: 31px;
    flex: 1;
  }

  .nb_b_t:hover {
    color: #f57932;
  }

  .nb_b_t {
    font-size: 16px;
    color: #333333;
    margin: 0px;
    padding: 30px 0px 16px 0px;
  }

  .nb_b_p {
    display: flex;
    font-size: 14px;
    color: #666666;
    line-height: 1.8;
    margin: 0;
    padding-bottom: 31px;
    word-break: break-all;
  }

  .nb_b_p:hover {
    color: #f57932;
  }

  .nb_b_p_d1 {
    padding-left: 33px;
    font-size: 14px;
    color: #999999;
    padding-bottom: 15px;
  }

  .nb_b_p_d1_p {
    background: url("./images/d1.png") no-repeat;
  }

  .c2 {}

  .company {
    margin-top: 73px;
    background: url("./images/company.png") no-repeat;
    background-size: auto 810px;
    height: 810px;
    font-size: 20px;
    color: #f5f5f5;
    text-align: center;
  }

  .company:hover {
    background-size: 180% auto;
  }

  .c2_p1 {
    padding-top: 188px;
    line-height: 2.0;
  }

  .c2_p2 {
    width: 1055px;
    height: 69px;
    font-size: 14px;
    line-height: 28px;
    margin: 0 auto;
    color: #f9f9f9;
  }

  .c2_c {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    font-size: 14px;
    color: #f2f2f2;
    opacity: 0.68;
    padding-top: 135px;
  }

  .c2_c_c {
    flex: 1;
    text-align: center;
  }

  .c2_c_c img {
    width: 126px;
    height: 161px;
    cursor: pointer;
  }

  .news_infomation {
    display: flex;
    width: 1200px;
    margin: 0 auto;
    padding-top: 72px;
  }

  .nf_video {
    flex-basis: auto;
    width: 649px;
    height: 363px;
  }

  .nf_list {
    flex: 1;
    padding-left: 16px;
  }

  .nf_list_item {
    display: flex;
  }

  .mbV {
    margin-bottom: 17px;
  }

  .nf_list_item div:first-child {
    flex-basis: auto;
    width: 123px;
    height: 110px;
  }

  .nf_list_item div:last-child {
    flex: 1;
    padding-left: 16px;
  }

  .nf_list_item div:last-child p:first-child {
    font-size: 14px;
    color: #525252;
  }

  .nf_list_item div:last-child p:first-child:hover {
    color: #f57932;
  }

  .nf_list_item div:last-child p:last-child {
    font-size: 12px;
    color: #818181;
    padding-top: 8px;
    line-height: 1.5;
  }

  .nf_list_item div:last-child p:last-child:hover {
    color: #f57932;
  }

  .platform {
    width: 100%;
    background: url("./images/platform.png") no-repeat;
    background-size: auto 810px;
    margin-top: 72px;
    height: 810px;
  }

  .platform_c {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    padding-top: 285px;
    font-size: 24px;
    color: #f1f1f1;
  }

  .platform_c .c2_c_c {}

  .platform_c .c2_c_c img {
    width: 240px;
    height: 320px;
  }

  .c2Animation:hover {
    transfrom:scale {
      1.2,
      1.2
    }

    ;
  }

  .mt100 {
    margin-top: 100px;
  }

  .partners {
    padding-top: 72px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 1200px;
    margin: 0 auto;
  }

  .partners:last-child {
    padding-bottom: 92px;
  }

  .partners_box {
    flex-basis: auto;
    width: 271px;
    height: 135px;
    box-shadow: 0px 0px 25px 0px rgba(34, 24, 21, 0.15);
    display: flex;
    align-items: center;
  }

  .partners_box img {
    margin: 0 auto;
  }

  /*平台技术特效*/
  .platformImg:hover {
    -webkit-animation: platformImgAnimation 0.5s 0s ease-in-out 1 normal;
    -o-animation: platformImgAnimation 0.5s 0s ease-in-out 1 normal;
    animation: platformImgAnimation 0.5s 0s ease-in-out 1 normal;
  }

  @keyframes platformImgAnimation {
    0% {
      -webkit-transform: rotateY(120deg);
      -moz-transform: rotateY(120deg);
      -ms-transform: rotateY(120deg);
      -o-transform: rotateY(120deg);
      transform: rotateY(120deg);
    }

    50% {
      -webkit-transform: rotateY(240deg);
      -moz-transform: rotateY(240deg);
      -ms-transform: rotateY(240deg);
      -o-transform: rotateY(240deg);
      transform: rotateY(240deg);
    }

    100% {
      -webkit-transform: rotateY(360deg);
      -moz-transform: rotateY(360deg);
      -ms-transform: rotateY(360deg);
      -o-transform: rotateY(360deg);
      transform: rotateY(360deg);
    }

  }

</style>

<script>
  var index = new Vue({
    el: '#index',
    data: {
      logo: {
        url: './images/logo.png'
      },
      publicFund: {},
      bannerList: [],
      ourMove: {},
      video: {},
      newsList: [],
      partnerList: [],
      platform: {},
      footer: {},
      profile: {},
      ourDuty: {},
      ourPrinciple: {},
      publicList: [],
    },
    mounted: function () {
      var that = this;
      getBanner({
        platform: 1,
        section: 1
      }, function (res) {
        that.bannerList = res.data.result;
        var imgList = [];
        for (var i = 0; i < that.bannerList.length; i++) {
          imgList.push(that.bannerList[i].url);
        }
        var imgWidth = window.screen.width;
        var imgHeight = imgWidth / 948 * 406;
        var banner = new FragmentBanner({
          container: "#banner", //选择容器 必选
          imgs: imgList,
          size: {
            width: imgWidth,
            height: imgHeight
          },
          boxTime: 5000,
          fnTime: 10000
        });





      });

      var search = {
        pageSize: 3,
        sort: "createTime",
        order: "desc",
        pageNumber: 1,
        section: 2
      };
      getNewsList(search, function (res) {
        that.publicList = res.data.result.content;
        that.publicList.forEach(function (e) {
          e.yearStr = that.getYear(e.createTime);
          e.dayStr = that.getDay(e.createTime);
          e.summary = e.summary.substring(0, 54);
          e.title = e.title.substring(0, 18);
        });
      })

      getContent('publicFund', function (res) {
        that.publicFund = res;

      });
      getContent('profile', function (res) {
        that.profile = res;


      });
      getAsset('logo', function (res) {
        that.logo = res.data.result;
        console.log(this.logo);
      });
      getContent('ourMove', function (res) {
        that.ourMove = res.content;
      });
      getContent('ourDuty', function (res) {
        that.ourDuty = res.content;
      });
      getContent('ourPrinciple', function (res) {
        that.ourPrinciple = res.content;
      });
      getSingleVideo({
        onTop: true
      }, function (res) {
        that.video = res.data.result;
      });
      getNewsList({
        pageNumber: 1,
        pageSize: 3,
        sort: "seq",
        order: "asc",
        section: 1,
      }, function (res) {
        that.newsList = res.data.result.content;
        that.newsList.forEach(function (e) {
          e.summary = e.summary.substring(0, 100);
        });
      });
      getPartner(function (res) {
        that.partnerList = res.data.result;
      });
      getContent('platform', function (res) {
        that.platform = res;
      });
      getPartial('footer', function (res) {
        that.footer = res;
      });

      console.log(that);
    },
    methods: {
      getUrl: function (news) {
        if (news.section == 2 || news.section == 3) {
          return './publicInfo.html?id=' + news.id;
        } else {
          return './newsInfo.html?id=' + news.id;
        }
      },
      getYear(val) {
        if (val != null) {
          var date = new Date(val);
          return date.getFullYear();
        }
      },
      getDay(val) {
        if (val != null) {
          var date = new Date(val);
          return (date.getMonth() + 1) + '-' + date.getDate();
        }
      }
    }
  });

  $(document).ready(function () {
    //     // $("#footer").load("./footer.html",function(e) {
    //     // });

    $(".c2Animation").mousemove(function () {
      $(this).find("img").stop().animate({
        width: "165px",
        height: "212px"
      }, {
        speed: '50'
      })
    })
    $(".c2Animation").mouseout(function () {
      $(this).find("img").stop().animate({
        width: "126px",
        height: "161px"
      }, {
        speed: '50'
      })
    });


    $(".nb_tab").click(function () {
      $(this).addClass("bn_t_active");
      $(this).siblings().removeClass("bn_t_active");
      var index = $(this).index();
      console.log(index);
      $(".nb_c").find(".nb_b:eq(" + index + ")").show();
      $(".nb_c").find(".nb_b:eq(" + index + ")").siblings().hide();
    });
  });

</script>

</html>
